<template>
  <view class="page">
    <view class="box" v-for="item in list" :key="item.id">
      <view class="box-right">
        <view class="box-right-1"><span>时间：</span>{{ item.pay_date }}</view>
        <view class="box-right-1"><span>详情：</span>{{ item.consumption_name }}</view>
        <view class="box-right-1"><span>类型：</span>{{ item.types }} <view class="num">￥{{ item.pay_price }}</view></view>
      </view>
    </view>
  </view>
</template>

<script>
import { invoicingOrder } from "@/utils/request.js";

export default {
  data() {
    return {
      list: []
    }
  },
  onLoad(option) {
    const data = { id: option.id };
    this.invoicingOrder(data).then(res => {
      if (res) {
        this.list = res.list;
      }
    });
  },
  methods: {
    async invoicingOrder(data) {
      return await invoicingOrder(data);
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding-top: 28rpx;

  .box {
    width: 658rpx;
    margin: 0 auto 28rpx;
    border-radius: 12rpx;
    background: #ffffff;
    padding: 16rpx 18rpx;

    .box-right {
      .box-right-1 {
        padding: 12rpx 0;
        font-size: 25rpx;
        color: #333333;
        position: relative;

        span {
          color: #7f7f7f;
        }

        .num {
          position: absolute;
          top: 10rpx;
          right: 0;
          font-size: 26rpx;
        }
      }
    }
  }
}
</style>